<template>
    <div>
        <div style="margin-top: 10px">
            <el-button icon="el-icon-plus" size="mini" type="primary" @click="showAndDriverView">新增驾驶员信息</el-button>
        </div>

        <div style="margin-top: 10px">
            <el-table
                    :data="drivers"
                    border
                    stripe
                    size="mini"
                    style="width: 100%">
                <el-table-column
                        prop="driverid"
                        label="驾驶员编号"
                        width="160">
                </el-table-column>

                <el-table-column
                        prop="name"
                        label="驾驶员姓名"
                        width="160">
                </el-table-column>
                <el-table-column
                    prop="birth"
                    label="出生日期"
                    width="160">
                </el-table-column>

                <el-table-column
                        prop="phone"
                        label="联系电话"
                        width="160">
                </el-table-column>

                <el-table-column
                    prop="idcard"
                    label="身份证号"
                    width="160">
                </el-table-column>

                <el-table-column
                    prop="fk_teamid"
                    label="车队编号">
                </el-table-column>

                <el-table-column
                        label="状态">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.state==1">承运中</el-tag>
                        <el-tag type="success" v-if="scope.row.state==2">空闲</el-tag> <!--"scope.row："查询到的 json数据-->
                    </template>
                </el-table-column>

                <el-table-column
                        prop="remark"
                        label="备注"
                        width="160">
                </el-table-column>

                <el-table-column
                    prop="checkintime"
                    label="加入时间"
                    width="160">
                </el-table-column>

                <el-table-column
                    prop="isdelete"
                    label="数据记录状态"
                    width="160">
                </el-table-column>

                <el-table-column
                    prop="altertime"
                    label="修改时间"
                    width="160">
                </el-table-column>

                <el-table-column label="操作" width="150" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary">编辑</el-button>
                        <el-button size="mini" type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog
                title="添加驾驶员信息"
                :close-on-click-modal="false"
                :visible.sync="dialogVisible"
                width="50%">

            <div>
                <table>
                    <tr>
                        <td></td>
                    </tr>
                </table>
            </div>

            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
           </span>
       </el-dialog>

    </div>
</template>

<script>
    import {getRequest} from "../../utils/api";

    export default {
        name: "DriverMana",

        data(){  /*变量声明*/
            return{
                total:0, /*数据总量*/
                drivers:[] /*后端传输的所有数据*/
            }
        },
        mounted() {  /*方法调用*/
            this.initdrivers();
        },
        methods:{ /*方法处理*/

            initdrivers(){  /*驾驶员所有信息*/
                getRequest("/driver/").then(resp=>{
                    if (resp){
                        this.drivers=resp.data;
                        this.total = resp.total;

                    }
                })
            }
        }
    }


</script>

<style scoped>

</style>